<template>
  <view class="navbar" :style="{ 'padding-top': TopButton.top + 'px', 'background-color': styleData.background }">
    <view class="sub-title" :style="{ 'color': styleData.TextColor }">{{ styleData.topText }}</view>

  </view>
</template>
  
<script>
import { mapState } from "vuex";
export default {
  props: {
    styleData: {
      type: Object,
    }
  },
  computed: {
    ...mapState(["safeArea", "TopButton"]),
  },
};
</script>
  
<style  lang="scss" scoped>
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-bottom: 16rpx;

  .sub-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64rpx;
  

  }
}
</style>
  